<template>
    <div class="bill-panel" v-if="!isTraiding">
      <div class="m-top">
        <div class="price-box">
          <p class="txt">总支付金额</p>
          <p class="price"><em>￥</em>{{parcel.pay_total}}</p>
        </div>
        <span class="code">-</span>
        <div class="price-box">
          <p class="txt">佣金金额</p>
          <p class="price"><em>￥</em>{{parcel.commission_total}}</p>
        </div>
        <span class="code">-</span>
        <div class="price-box">
          <p class="txt">退款金额</p>
          <p class="price"><em>￥</em>{{parcel.refund_total}}</p>
        </div>
        <span class="code">+</span>
        <div class="price-box">
          <p class="txt">销售金额</p>
          <p class="price"><em>￥</em>{{parcel.sale_total}}</p>
        </div>
        <span class="code">=</span>
        <div class="price-box">
          <p class="txt">总收入金额</p>
          <p class="big-price"><em>￥</em>{{parcel.actual_total}}</p>
        </div>
      </div>
      <div class="m-content">
        <div  v-for="item in parcel.list" :class="[item.channel,currentChannel !== item.channel ? '':'cur','channel-type']" @click="handleClick(item.channel)">
          <div v-if="item.channel == 'lehui' || item.channel == 'shanhui' || item.channel == 'dianping' ||item.channel == 'POS' ||item.channel == 'cash'" >
            <p class="title">{{item.name}}</p>
            <div class="m-list">
              <p class="tit">支付金额</p>
              <p class="price"><em>￥</em>{{item.pay_total}}</p>
            </div>
            <div class="m-list">
              <p class="tit">收入金额</p>
              <p class="price"><em>￥</em>{{item.actual_total}}</p>
            </div>
          </div>
          <div  v-if="item.channel == 'refund'">
            <p class="title">{{item.name}}</p>
            <div class="m-list">
              <p class="price"><em>￥</em>{{item.pay_total}}</p>
            </div>
          </div>
          <div  v-if="item.channel == 'free'">
            <p class="title">{{item.name}}</p>
            <div class="m-list">
              <p class="type" v-for="ele in item.list">{{ele.pay_type}} × {{ele.count}} </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bill-panel" v-else-if="isTraiding">
      <div class="m-top">
        <div class="price-box">
          <p class="txt">总实付金额</p>
          <p class="price"><em>￥</em>{{parcel.origin}}</p>
        </div>
        <span class="code">-</span>
        <div class="price-box">
          <p class="txt">佣金金额</p>
          <p class="price"><em>￥</em>{{parcel.commission}}</p>
        </div>
        <span class="code">-</span>
        <div class="price-box">
          <p class="txt">退款金额</p>
          <p class="price"><em>￥</em>{{parcel.refund}}</p>
        </div>
        <span class="code">=</span>
        <div class="price-box">
          <p class="txt">总收入金额</p>
          <p class="big-price"><em>￥</em>{{parcel.money}}</p>
        </div>
      </div>
      <div class="m-content">
        <div class="cur channel-type lehui">
          <p class="title">乐惠</p>
          <div class="m-list">
            <p class="tit">支付金额</p>
            <p class="price"><em>￥</em>{{parcel.origin}}</p>
          </div>
          <div class="m-list">
            <p class="tit">收入金额</p>
            <p class="price"><em>￥</em>{{parcel.money}}</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "billPanel",
        props:['parcel','currentChannel','isTraiding'],
        methods:{
          handleClick(channel){
            const opt = {
              "channel":channel,
              "page":1
            }
            this.$emit('upload',opt)
          }
        }
    }
</script>

<style scoped lang="scss">
  .bill-panel{
    background: #FFFFFF;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
    .m-top{
      background-image: linear-gradient(270deg, #FF509F 0%, #FF869B 100%, #F76B1C 100%);
      border-radius: 0 0 3px 3px;
      padding:30px 50px;
    }
    .price-box{
      display: inline-block;
      margin-right:30px ;
      .txt{
        opacity: 0.8;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
      }
      .price{
        font-family: PingFangSC-Regular;
        font-size: 30px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        opacity: 0.8;
        em{
          font-size: 18px;
        }
      }
      .big-price{
        font-family: PingFangSC-Regular;
        font-size: 42px;
        color: #fff;
        letter-spacing: 0;
        text-align: center;
        line-height: 36px;
        em{
          font-size: 24px;
        }
      }
    }
    .code{
      font-family: PingFangSC-Regular;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
      vertical-align: top;
      margin-right: 30px;
    }
    .m-content{
      padding:45px 15px;
    }
    .channel-type{
      background: #FFFFFF;
      border-radius: 8px;
      overflow: hidden;
      width: 170px;
      display: inline-block;
      margin:0 11px;
      box-shadow: 0 2px 8px 0 rgba(224,224,224,0.58);
      min-height:219px;
      .title{
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: justify;
        background-image: linear-gradient(45deg, #FF509F 0%, #FF9F58 100%);
        display: inline-block;
        padding: 0 50px 0 5px;
        border-bottom-right-radius: 30px;
      }
      .m-list{
        margin:25px;
        .tit{
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #9E9E9E;
          letter-spacing: 0;

        }
        .price{
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #FF679E;
          letter-spacing: 0;
          /*text-align: center;*/
          em{
            font-size: 18px;
          }
        }
      }
    }

    .lehui, .shanhui{


      .title{
        background-image: -webkit-gradient(linear, right top, left top, from(#9F78FB), to(#DA8EFB));
        background-image: linear-gradient(90deg, #9F78FB 0%, #DA8EFB 100%);
      }
    }
    .dianping{

      .title{
        background-image: linear-gradient(-143deg, #FBFF94 0%, #F8752B 100%);
      }
    }
    .free{

      .title{
        background-image: linear-gradient(230deg, #BDE96E 0%, #80CD49 100%);
      }
    }
    .refund{

      .title{
        background-image: linear-gradient(225deg, #7D99FF 0%, #7D99FF 41%, #B0C1FF 100%);
      }
    }
    .cash{
      .title{
        background-image: linear-gradient(118deg, #91EBF4 0%, #69D0F4 100%);
      }
    }
    .cur{
     border:solid 2px  #FF509F;
      &.lehui{
        border:solid 2px  #9F78FB;
      }

      &.dianping{
        border:solid 2px #FBFF94 ;
      }
      &.free{
        border:solid 2px #80CD49;
      }
      &.refund{
        border:solid 2px  #B0C1FF;
      }
      &.cash{
        border:solid 2px  #91EBF4;
      }
    }
  }
</style>
